<template>
  <div>
    <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
        <div class="iconfont header-back-icon">&#xe624;</div>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
        景点详情
        <router-link to="/">
            <div class="iconfont header-fixed-back">&#xe624;</div>
        </router-link>
    </div>
  </div>
</template>

<script>
export default {
    name:'DetailHeader',
    data(){
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods:{
        handleScroll(){
            const top = document.documentElement.scrollTop || document.body.scrollTop||window.pageYOffset
            if(top>60){
                this.showAbs = false
                let opacity = top/140
                opacity = opacity>1?1:opacity
                this.opacityStyle = {
                    opacity
                }
            }else{
                this.showAbs = true
            }
        }
    },
    mounted(){
        window.addEventListener('scroll',this.handleScroll)
    },
    destroyed(){
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
    .header-abs
        position:absolute
        left: 0.2rem
        top:0.2rem
        width:0.8rem
        height:0.8rem
        line-height: .8rem
        border-radius: .4rem
        background: rgba(0,0,0,0.6)
        text-align: center
        z-index:10
        .header-back-icon
            color:#fff
            font-size:.4rem
    .header-fixed
        position:fixed
        top:0
        left:0
        right:0
        line-height: $HeaderHeight
        height: $HeaderHeight
        color:#fff
        background: $bgColor
        font-size:.32rem
        text-align: center
        z-index: 10
        .header-fixed-back
            position:absolute
            top:0
            left:0
            width: .64rem
            text-align: center
            font-size: .4rem
            color: white
</style>